<template>
	<el-row>
		<el-col :span='3'>
			<el-menu  background-color="#DCDFE6"  :collapse="isCollapse" :default-openeds="opens" >		
				 <el-submenu index="1">
			        <template slot="title">
			          <i class="el-icon-setting"></i>
			          <span>页面管理</span>
			        </template>
			          <el-menu-item index="1-1">技能管理</el-menu-item>
			          <el-menu-item index="1-2">作品管理</el-menu-item>
			          <el-menu-item index="1-3">模块管理</el-menu-item>
			          <el-menu-item index="1-4">新建模块</el-menu-item>
			      </el-submenu>
			      <el-submenu index="2">
			      	<template slot="title">
				        <i class="el-icon-document"></i>
				        <span slot="title">博文管理</span>
			        </template>
			        <el-menu-item index="2-1"><router-link to="/newblog">新建博文</router-link></el-menu-item>
			        <el-menu-item index="2-2"><router-link to="/bloglist">博文列表</router-link></el-menu-item>
			        <el-menu-item index="2-3"><router-link to="/newlabel">新建标签</router-link></el-menu-item>
			        <el-menu-item index="2-4"><router-link to="/labelist">标签列表</router-link></el-menu-item>
			      </el-submenu>
			       <el-submenu index="3">
			      	<template slot="title">
				        <i class="el-icon-edit"></i>
				        <span slot="title">其他</span>
			        </template>
			          <el-menu-item index="3-1">选项1</el-menu-item>
			          <el-menu-item index="3-2">选项2</el-menu-item>
			      </el-submenu>
		      </el-menu>
	      </el-col>
	      <el-col :span='21'>
	      	<el-header>
	      		<div class="title">博文管理>>新建博文</div>
	      		<div class="my">
	      			<div class="headerImg">
	      				<img :src="headerImg" alt="">
	      			</div>
	      			<span>{{username}}</span>
	      			<i></i>
	      			<a href="javascript:;" @click="logout">退出</a>
	      		</div>

	      	</el-header>
	      	<el-main>
	      		<router-view/>
	      	</el-main>
	      </el-col>
      </el-row>
</template>
<script>
import jwt from 'jsonwebtoken'
	export default{
		name:'MyMenu',
		data(){
			return{
				isCollapse: false,
				opens:['1','2','3'],
				headerImg:require('../assets/temp.jpg'),
				username:''
			}			
		},//data
		created(){
			const userInfo=this.getUserInfo();
			if(userInfo!=null){
				this.username=userInfo.username;
			}else{
				this.username=''
			}
		},//created
		methods:{
			getUserInfo(){//获取用户信息
				const token=sessionStorage.getItem('blog-token');
				if(token!=null&&token!='null'){
					let decode=jwt.decode(token);//解析token
					return decode
				}else{
					return null
				}
			},
			logout(){//退出
				this.$router.push('/');
				sessionStorage.setItem('blog-token',null);
			}
		}//methods
	}
</script>
<style scoped>
	 .el-header {
	    background-color:#409EFF;
	    color: #fff;
	    line-height: 60px;
  	}
  	.title,.my{
  		display: inline-block;
  	}
  	.my{
  		float: right;
  	}
  	.headerImg{
  		display: inline-block;
  		width: 40px;
  		height: 40px;
  		border: 1px solid #fff;
  		border-radius: 50%;
  		vertical-align: middle;
  		overflow: hidden;
  	}
  	.headerImg img{
  		width: 40px;
  	}
  	.my i{
  		display: inline-block;
  		width: 16px;
  		height: 16px;
  		background: url(../assets/logout.png) no-repeat left;
  		background-size: contain;
  		vertical-align: middle;
  		margin-left: 15px;
  	}
</style>